<button
    on:click="toggle()"
    class:indeterminate
    class:btn-toggled="value && !indeterminate"
    class="btn btn-s"
    disabled="{disabled}"
    data-uid="{uid}"
>
    <slot>x</slot>
</button>

<script>
    export default {
        data() {
            return {
                value: false,
                indeterminate: false,
                notoggle: false,
                disabled: false,
                uid: ''
            };
        },
        methods: {
            toggle() {
                this.fire('select');
                const { value, notoggle } = this.get();
                if (!notoggle) {
                    this.set({ value: !value, indeterminate: false });
                }
            }
        }
    };
</script>

<style>
    .btn-s {
        padding-left: 5px;
        padding-right: 5px;
        font-weight: 300;
        font-size: 13px;
    }
    :global(.btn.indeterminate .fa) {
        position: relative;
        z-index: 1;
        opacity: 0.8;
    }
    .btn-toggled {
        background: #18a1cd;
        color: white;
        text-shadow: none;
    }
    .btn.indeterminate:after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        z-index: 0;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 26px 26px 0 0;
        border-color: #96d2e6 transparent transparent transparent;
    }
</style>
